import { Checkbox, Input, Select, Switch } from "antd";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import request from "umi-request";
import "./Style/AddAvailability/AddAvailability.css";
import "./Style/Availability/Availability.css";
const responses = await request.get("/api/Availability");
const Availability = () => {
  //input
  const { Search } = Input;
  //状态
  const [status, setstatus] = useState<boolean>(false);
  const [pkg, setpkg] = useState(false);
  //tab表格数据
  const [tabarr, settabarr] = useState<any>([
    {
      // id: "788524244",
      // checked: false,
      // "paixu|100-1000": 100,
      // xiaoqu: "@ctitle(4,6)",
      // title: "@ctitle(10,15)",
      // "mj|70-150": 70,
      // "zj|70-150": 70,
      // "checkedtwo|1": false,
    },
  ]);
  const [tabarrnew, settabarrnew] = useState<any>([]);
  //下拉框
  const onChange = (value: string) => {
    dispatch({
      type: "onChange",
      payload: value,
    });
  };
  //状态
  function statu(e: any) {
    dispatch({
      type: "checkedchange",
      payload: e,
    });
  }
  //单个删除
  function del(index: number) {
    dispatch({
      type: "delete",
      payload: index,
    });
  }
  //模糊搜索
  const onSearch = (value: string) => {
    dispatch({
      type: "fillter",
      payload: value,
    });
  };
  //全选框
  const Checkboxs = (e: any) => {
    dispatch({
      type: "Checkboxs",
      payload: e,
    });
  };
  //选中删除
  function delAll() {
    dispatch({
      type: "delAll",
      payload: "",
    });
  }
  //反选
  function check(item: any) {
    dispatch({
      type: "check",
      payload: item,
    });
  }
  const [itemcn, setitemva] = useState({
    checked: false,
    checkedtwo: true,
    id: Math.random()
      .toString()
      .slice(2, 32 + 2),
    mj: 21312,
    paixu: Math.floor(Math.random() * 1000),
    title: 3213,
    xiaoqu: 31231,
    zj: 123213,
  });
  //编辑点击事件
  function edit(item: any) {
    setitemva(item);
    setpkg(!pkg);
    setCommunityinp(item.xiaoqu);
    setProperty(item.title);
    setarea(item.mj);
    setTotalprice(item.zj);
  }
  //关闭
  function closeB() {
    setpkg(false);
  }
  //仓库三步走
  const dispatch = useDispatch();
  const store = useSelector((state: any) => state.reducer);
  //绑定input赋值
  const [Communityinp, setCommunityinp] = useState("");
  const [Property, setProperty] = useState("");
  const [area, setarea] = useState("");
  const [Totalprice, setTotalprice] = useState("");
  function Community(e: any) {
    setCommunityinp(e.target.value);
  }
  function Propertyy(e: any) {
    setProperty(e.target.value);
  }
  function areac(e: any) {
    setarea(e.target.value);
  }
  function Totalpricea(e: any) {
    setTotalprice(e.target.value);
  }
  function upListxiu() {
    setpkg(false);
    let obj = {
      checked: itemcn.checked,
      checkedtwo: itemcn.checkedtwo,
      id: itemcn.id,
      mj: area,
      paixu: itemcn.paixu,
      title: Property,
      xiaoqu: Communityinp,
      zj: Totalprice,
    };
     dispatch({
        type: "upListgd",
        payload: obj,
      });
  }
  useEffect(() => {}, [store.arr]);
  return (
    <div className="AvailabilityBox">
      <div className="AvailabilityHeader">
        <div className="AvailabilityHeaderOne">
          <p>状态</p>
          <div>
            <Select
              showSearch
              placeholder="-所有-"
              optionFilterProp="children"
              onChange={onChange}
              filterOption={(input, option) =>
                (option?.label ?? "")
                  .toLowerCase()
                  .includes(input.toLowerCase())
              }
              options={[
                {
                  value: "所有",
                  label: "所有",
                },
                {
                  value: "启用",
                  label: "启用",
                },
                {
                  value: "待审",
                  label: "待审",
                },
              ]}
            />
          </div>
        </div>
        <div className="AvailabilityHeaderTow">
          <p>关键词</p>
          <div>
            <Search
              placeholder="输入关键词搜索"
              allowClear
              enterButton="搜索"
              size="middle"
              onSearch={onSearch}
            />
          </div>
        </div>
      </div>
      <div className="AvailabilityMain">
        {/* tab表格 */}
        <table className="table" cellSpacing={0}>
          {/* 头部 */}
          <thead>
            <tr>
              <td>
                <input
                  checked={store.kg}
                  onChange={Checkboxs}
                  type="checkbox"
                />
              </td>
              <td>ID</td>
              <td>小区名称</td>
              <td>标题</td>
              <td>面积</td>
              <td>总价</td>
              <td>排序</td>
              <td>状态</td>
              <td>操作</td>
            </tr>
          </thead>
          {/* 中间 */}

          <tbody>
            {/* 渲染 */}
            {store.arr
              ? store.arr.map((item: any, index: number) => {
                  return (
                    <tr key={index}>
                      <td>
                        <input
                          onChange={() => check(item)}
                          checked={item.checked}
                          type="checkbox"
                        />
                      </td>
                      <td style={{ width: "15vw" }}>{item.id}</td>
                      <td style={{ width: "15vw" }}>{item.xiaoqu}</td>
                      <td style={{ width: "18vw" }}>{item.title}</td>
                      <td style={{ width: "5vw" }}>{item.mj}</td>
                      <td style={{ width: "5vw" }}>{item.zj}</td>
                      <td style={{ width: "5vw" }}>{item.paixu}</td>
                      <td style={{ width: "8vw" }}>
                        <Switch
                          size="default"
                          checkedChildren="正常"
                          unCheckedChildren="待审"
                          checked={item.checkedtwo}
                          onChange={() => statu(item)}
                        />
                      </td>
                      <td>
                        <button className="bj" onClick={() => edit(item)}>
                          编辑
                        </button>
                        <button className="del" onClick={() => del(index)}>
                          删除
                        </button>
                      </td>
                    </tr>
                  );
                })
              : ""}
          </tbody>
        </table>
        {/* 状态显示
        <div
          className="tbodystatu"
          style={{
            display: store.status ? "block" : "",
          }}
        >
          <img src={require("../../imgs/tu.png")} alt="" />
        </div> */}
      </div>
      <div className="AvailabilityFoot">
        <div className="AvailabilityFootA">
          <div>
            <Checkbox checked={store.kg} onChange={Checkboxs}>
              全选/取消
            </Checkbox>
          </div>
          <button onClick={delAll}>删除</button>
        </div>
      </div>
      <div
        className="showtost"
        style={{ width: pkg ? "90vw" : "0", height: "100vh" }}
      >
        <div className="hvhsuei">
          <span
            onClick={closeB}
            style={{ float: "right", marginRight: "5vw", cursor: "pointer" }}
          >
            X
          </span>
        </div>
        <div className="hyfawa">
          {/* 房源信息 */}
          <div className="AddAvailabilityMain">
            <div className="AddAvailabilityMainOne">
              <div>所属小区</div>
              <div>
                <input type="text" value={Communityinp} onChange={Community} />
              </div>
            </div>
          </div>
          <div className="AddAvailabilityMainOne">
            <div className="AddAvailabilityMainTow">
              <div>房源名称</div>
              <div>
                <input type="text" value={Property} onChange={Propertyy} />
              </div>
            </div>
          </div>
          <div className="AddAvailabilityMainTow">
            <div className="AddAvailabilityMainThird">
              <div>面积</div>
              <div>
                <input type="text" value={area} onChange={areac} />
              </div>
            </div>
          </div>
          <div className="AddAvailabilityMainThird">
            <div className="AddAvailabilityMainFour">
              <div>总价</div>
              <div>
                <input type="text" value={Totalprice} onChange={Totalpricea} />
              </div>
            </div>
          </div>
          <div className="AddAvailabilityMainThirdA">
            <button onClick={upListxiu}>提交</button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Availability;
